<template>
	<view>
		<view class="upload" @click="upload">
			<view class="u_left">
				头像
			</view>
			<view class="u_right" >
				<image :src="'http://localhost:3000/images/avatar/'+userInfo.avatar" mode="" class="avatar"></image>
				<uni-icons type="arrowright" size="20" color="#D8D8D8"></uni-icons>
			</view>
		</view>
		<view class="user_name">
			<view class="u_left">
				用户名
			</view>
			<view class="u_right">
				<text>{{userInfo.username}}</text>
				<uni-icons type="arrowright" size="20" color="#D8D8D8"></uni-icons>
			</view>
		</view>
		<view class="user_address" @click="gotoAddress">
			<view class="u_left">
				我的地址
			</view>
			<view class="u_right">
				<uni-icons type="arrowright" size="20" color="#D8D8D8"></uni-icons>
			</view>
		</view>
		<view class="safety">
			安全设置
		</view>
		<view class="user_password" @click="change_pas">
			<view class="u_left">
				登录密码
			</view>
			<view class="u_right" >
				<text>修改</text>
				<uni-icons type="arrowright" size="20" color="#D8D8D8"></uni-icons>
			</view>
		</view>
		<view class="quite">
			<button type="warn"  @click="quite">退出登录</button>
		</view>
	</view>
</template>

<script>
	import uniIcons from "../../components/uni-icons/uni-icons.vue"
	import {mapState} from 'vuex'
	import http from '@/api/http.js'
	export default {
		data() {
			return {
				imgUrl:""
			};
		},
		components:{
			uniIcons
		},
		methods:{
			upload(){
				uni.chooseImage({
					count:1,
					success:(res)=>{
						const tempFilePaths = res.tempFilePaths;
						uni.uploadFile({
							url:'http://localhost:3000/users/upload',
							filePath:tempFilePaths[0],
							name:'avatar',
							formData: {
								'username': this.userInfo.username
							},
							success: (uploadFileRes) => {
								console.log(uploadFileRes.data.code);
								var obj = JSON.parse(uploadFileRes.data);
								console.log(obj);
								if(obj.code==100){
									let newAvatar = obj.avatar;
									console.log(this.$store);
									this.$store.commit('changeAvatar',newAvatar);
								}
							}
						})
					}
				});
			},
			async quite(){
				uni.showModal({
				    title: '系统提示',
				    content: '是否退出登录',
				    success: async (res)=> {
				        if (res.confirm) {
							let response = await http.logout();
							this.$store.commit('logout');
				            console.log('用户点击确定');
							uni.switchTab({
								url:'/pages/profile/profile',
							});
				        } else if (res.cancel) {
				            console.log('用户点击取消');
				        }
				    }
				});

			},
			change_pas(){
				uni.navigateTo({
					url:'../password/password'
				})
			},
			gotoAddress(){
				uni.navigateTo({
					url:'../address/address'
				})
			}
		},
		computed:{
			...mapState(['baseUrl','userInfo']),
		},
		onLoad(){
			this.imgUrl = 'http://localhost:3000/images/avatar/'+this.userInfo.avatar;
		}

		
		
	}
</script>

<style lang="scss">
	page{
		background: #f2f2f2;
	}
	.upload,.user_name,.user_address,.user_password{
		@include flexbetween();
		padding: 20rpx;
		background: #fff;
		border-top: 1px solid #ddd;
	}
	.u_left,.u_right{
		@include flexcenter();
	}
	.avatar{
		width: 116rpx;
		height: 116rpx;
		border-radius: 50%;
	}
	.safety{
		padding: 20rpx;
	}
	.quite{
		margin-top: 60rpx;
		padding: 0 30rpx;
	}
	
</style>
